<template>
  <div class="hos_page">
    <user-card :islogin="true" :isbind="true"></user-card>

    <div class="cus_select" @click="dmsfun">
      <img src="@/assets/img/calendar@2x.png" alt=""
           style="width: 1.0625rem; height: 0.9375rem; margin-right: 0.3125rem"/>
      <div>{{ value }}</div>
      <img src="@/assets/img/drop.png" alt="" style="width: 0.6875rem; height: 0.4375rem"/>
    </div>
    <template v-if="noData">
      <div class="noresult">
        <img src="@/assets/img/img_no results@2x.png" alt=""/>
        <div>无数据</div>
      </div>
    </template>
    <template v-if="noData == false">
      <div class="billBox">
        <div class="bill_box" @click="goInvoice(item)" v-for="item in visitList">
          <img src="@/assets/img/right.png" alt="" class="bill_box_img">
          <div class="bill_box_1">
            <div>{{ item.diagname }}</div>
            <div v-if="item.ynsee == '1'" style="color: green">已看诊</div>
            <div v-if="item.ynsee == '0'" style="color: red">未看诊</div>
          </div>
          <div class="bill_box_2">
            <div class="left">
              <div>科室：{{ item.deptname }}</div>
              <div style="font-size: 0.875rem">医生：{{ item.decpname }}</div>
              <div style="font-size: 0.875rem;">
                挂号类型:{{ item.pactName }}
              </div>
              <div>挂号时间：{{ item.regDate }}</div>
            </div>
            <!-- <div class="paybtn"  v-if="item.orderStatus == '0'" @click.stop="goPay(item.orderId)">支付</div> -->
          </div>
        </div>
      </div>
    </template>

    <div class="date_mask" v-if="dateMaskShow">
      <div class="date_mask_ul">
        <div class="date_mask_li" v-for="(date, index) in datelist" @click="dateClick($event, date)"
             :style="{ color: date.selected == true ? '#448EFF' : '#3F4551' }" :data-idx="index">
          {{ date.name }}
        </div>
        <div class="date_mask_li" @click="dmsfun">取消</div>
      </div>
    </div>
    <popup v-model="alertShow" height="100vh" :hide-on-blur="false" is-transparent>
      <div class="mask_confirm" style="">
        <div class="tit">通知</div>
        <div class="content">
          <div>我院于2023年8月30日17:00起启用电子发票票据，届时收费窗口将不再提供纸质发票和收费清单。<br/>
            患者朋友可以通过以下几种方式获取电子发票：<br/>
            1.线上智慧医院->首页->门诊->电子发票；<br/>
            2.微信扫描收费处/自助机提供的《门急诊挂号(收费)凭条》下方二维码；<br/>
            3.微信小程序“电子票夹”实名认证后查询。<br/>
            望广大患者朋友周知。
          </div>
        </div>
        <div class="btn" @click="alertShow = !alertShow">我已阅读并同意</div>
      </div>
    </popup>
  </div>
</template>
<script>
import userCard from "@/components/userCard.vue";
import {Popup, Tab, TabItem} from "vux";
import {getOutpatientClinicCode} from "@/api/api";

export default {
  components: {
    Popup,
    userCard,
    Tab,
    TabItem,
  },
  data() {
    return {
      alertShow: false,
      noData: true,
      tabItemShow: "0",
      dateMaskShow: false,
      value: "一周内",
      y: "",
      m: "",
      d: "",
      EndDate: "",
      BeginDate: "",
      visitList: [],
      datelist: [
        {value: 0, name: "一周内", selected: false},
        {value: 0, name: "一月内", selected: false},
        {value: 0, name: "三月内", selected: false},
        {value: 0, name: "一年内", selected: false},
        {value: 0, name: "更早", selected: false},
      ],
    };
  },
  created() {
    this.alertShow = true;
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    this.getToday();
    if (window.localStorage.getItem("outPayIdx")) {
      var idx = JSON.parse(window.localStorage.getItem("outPayIdx"));
      this.datelist[idx].selected = true;
      this.changeDay(this.datelist[idx].name);
      this.value = this.datelist[idx].name;
    } else {
      this.getOutpatientClinicCode();
    }
  },
  methods: {
    // 获取患者挂号列表
    getOutpatientClinicCode() {
      var data = {
        hospPatientId: this.userInfo.hospPatientId,
        idcardType: "",
        idcardNo: this.userInfo.idNo,
        cardNo: "",
        name: this.userInfo.name,
        operMobile: this.userInfo.mobile,
        beginDate: this.EndDate,
        endDate: this.BeginDate,
      };
      getOutpatientClinicCode(data).then((res) => {
        if (res.code == 200) {
          this.visitList = [];
          if (res.data.patientlist instanceof Array) {
            this.visitList = res.data.patientlist;
          } else {
            this.visitList.push(res.data.patientlist);
          }
          if (this.visitList.length > 0) {
            this.noData = false;
          }
        }
      });
    },
    dmsfun() {
      this.dateMaskShow = !this.dateMaskShow;
    },
    dateClick(e, date) {
      var idx = e.currentTarget.dataset.idx;
      this.dmsfun();
      (this.value = date.name),
        this.datelist.forEach((element) => {
          element.selected = false;
        });
      this.datelist[idx].selected = true;
      this.changeDay(date.name);
      window.localStorage.setItem("outPayIdx", idx);
    },
    getToday() {
      var today = new Date();
      var yy = today.getFullYear();
      var mm = today.getMonth() + 1;
      var dd = today.getDate();
      this.BeginDate =
        yy + "-" + (mm < 10 ? "0" + mm : mm) + "-" + (dd < 10 ? "0" + dd : dd);
      var nowdate = new Date();
      var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
      this.y = oneweekdate.getFullYear();
      this.m = oneweekdate.getMonth() + 1;
      this.d = oneweekdate.getDate();
      this.EndDate =
        this.y +
        "-" +
        (this.m < 10 ? "0" + this.m : this.m) +
        "-" +
        (this.d < 10 ? "0" + this.d : this.d);
    },
    changeDay(name) {
      var nowdate = new Date();
      if (name == "一周内") {
        var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
        this.y = oneweekdate.getFullYear();
        this.m = oneweekdate.getMonth() + 1;
        this.d = oneweekdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
        if (this.$moment(this.EndDate).isBefore(this.$moment('2023-08-29').format('YYYY-MM-DD'), 'day')) {
          console.log(this.EndDate)
          this.EndDate = '2023-08-29'
        }

      } else if (name == "一月内") {
        nowdate.setMonth(nowdate.getMonth() - 1);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
        if (this.$moment(this.EndDate).isBefore(this.$moment('2023-08-29').format('YYYY-MM-DD'), 'day')) {
          console.log(this.EndDate)
          this.EndDate = '2023-08-29'
        }
      } else if (name == "三月内") {
        nowdate.setMonth(nowdate.getMonth() - 3);

        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
        if (this.$moment(this.EndDate).isBefore(this.$moment('2023-08-29').format('YYYY-MM-DD'), 'day')) {
          console.log(this.EndDate)
          this.EndDate = '2023-08-29'
        }
      } else if (name == "一年内") {
        nowdate.setMonth(nowdate.getMonth() - 12);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
        if (this.$moment(this.EndDate).isBefore(this.$moment('2023-08-29').format('YYYY-MM-DD'), 'day')) {
          console.log(this.EndDate)
          this.EndDate = '2023-08-29'
        }
      } else if (name == "更早") {
        this.EndDate = "2023-08-29";
      }
      this.getOutpatientClinicCode();
    },
    goInvoice(item) {
      this.$router.push({
        path: "/invoice_list",
        query: {
          clinicCode: item.clinicCode
        },
      });
    },
  },
  destroyed() {
  },
};
</script>
<style scoped>
.hos_page {
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
}

.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.cus_select {
  padding: 0px 1rem;
  background-color: #f7fafd;
  width: calc(100% - 2rem);
  height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.cus_select img {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

.cus_select div {
  width: calc(100% - 2.75rem);
  background-color: #f7fafd;
}

.date_mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.date_mask_ul {
  position: fixed;
  bottom: 0px;
  left: 0px;
  /* height: 18.75rem; */
  width: 100%;
  background-color: #ffffff;
}

.date_mask_li {
  width: 100%;
  height: 3.125rem;
  border-bottom: 0.0625rem solid #eee;
  line-height: 50px;
  text-align: center;
  font-size: 0.9375rem;
  color: #3f4551;
}

.date_mask_li:last-of-type {
  background-color: #f1f5f9;
}

.billBox {
  height: calc(100vh - 7.75rem);
  overflow-y: scroll;
  background: #f4f8fc;
  /* padding: 1rem 0; */
}

.bill_box {
  margin: 0.75rem 1rem;
  padding: 0px 1rem;
  width: calc(100% - 4rem);
  height: 9.375rem;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(174, 206, 254, 0.24);
  border-radius: 0.375rem;
  position: relative;
}

.bill_box .bill_box_1 {
  height: 2.8125rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e7ecf5;
}

.bill_box .bill_box_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bill_box .bill_box_2 .left {
  width: calc(100% - 6.25rem);
  height: 5.625rem;
  display: flex;
  /* align-items: center; */
  justify-content: space-around;
  flex-flow: column;
}

.bill_box .bill_box_2 .left > div:nth-of-type(2) {
  /* font-size: 0.875rem; */
}

.bill_box .bill_box_2 .left > div:nth-of-type(4) {
  font-size: 0.75rem;
  color: #a4adbe;
}

.bill_box .bill_box_2 .paybtn {
  width: 3.4375rem;
  height: 1.875rem;
  border: 1px solid #448eff;
  border-radius: 3px;
  color: #448eff;
  text-align: center;
  line-height: 1.875rem;
}

.bill_box_img {
  width: 0.5rem;
  height: 0.8125rem;
  position: absolute;
  top: calc((100% - 0.8125rem) / 2);
  right: 1rem;
}


.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}


.mask_confirm {
  width: 90%;
  background-color: #fff;
  height: 70%;
  margin: 0 auto;
  border-radius: 0.31rem;
  position: fixed;
  left: 5%;
  top:10%;
  /* position: relative; */
}

.mask_confirm .tit {
  height: 2.81rem;
  line-height: 2.81rem;
  text-align: center;
  border-bottom: 0.06rem solid #e7ecf5;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #448eff;
}

.mask_confirm .content {
  padding: 0.00rem 1.00rem;
  margin: 1.25rem 0;
  height: 66%;
  overflow-y: auto;
  line-height: 1.5rem;
}

.mask_confirm .btn {
  position: absolute;
  bottom: 0.94rem;
  left: calc((100% - 10.13rem) / 2);
  width: 10.13rem;
  height: 2.75rem;
  text-align: center;
  line-height: 2.75rem;
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  border-radius: 0.19rem;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
</style>
